<template>
	<view class="">
		<view style="position: absolute;top: 50%;transform: translate(-50%,-50%);left: 50%;width: 100%;">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
				:mode="indexes" :dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<!-- <text style="color: #fff; font-size: 32px;">
								{{item.url}}</text> -->
							<image :src="item.url" mode="heightFix" style="width: 100%;height:100%;">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
	</view>

</template>

<script>
	import {
		HOST
	} from '@/config/index.js'
	export default {
		data() {
			return {
				info: [{
						colorClass: 'uni-bg-red',
						url: '',
						content: '1'
					},
					{
						colorClass: 'uni-bg-green',
						url: '',
						content: '2'
					},
					{
						colorClass: 'uni-bg-blue',
						url: '',
						content: '3'
					},
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				pics: [],
			}
		},
		onLoad(e) {
			console.log('333', e.img);
			let imgString = e.img ||
				'/profile/upload/2024/01/25/ae4ae945-ebb8-4b83-9a89-afa4a6d3427f.jpg,/profile/upload/2024/01/25/8c7f2dd6-a72d-49ff-9857-c2bead7a282c.jpg,/profile/upload/2024/01/25/723f4447-50c3-4c0f-ba01-1300bb9ef37c.jpg'
			if (imgString.split(",")[0]) {
				this.pics.push(HOST + imgString.split(",")[0])
			}
			if (imgString.split(",")[1]) {
				this.pics.push(HOST + imgString.split(",")[1])
			}
			if (imgString.split(",")[2]) {
				this.pics.push(HOST + imgString.split(",")[2])
			}
			console.log('555', this.pics);
			this.info.forEach((item, i) => {
				item.url = this.pics[i] || ''
				if (!item.url) {
					this.info.splice(i, 1)
				}
			})
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
		}
	}
</script>
<style lang="scss">
	.swiper-box {
		height: 500px;
	}

	.swiper-item {
		display: flex;

		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 500px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}


	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}



	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		display: flex;
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		display: flex;
		padding: 0 15rpx;
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>